<template>
    <el-row>
        <el-col :span="3"><img style="height: 120px; width: 120px;" src="" alt=""></el-col>

        <el-col :span="6">
            <el-col>门店名称</el-col>
            <el-col>状态</el-col>
        </el-col>

        <el-col :span="4">
            <el-col>手机号：</el-col>
            <el-col>门店详细地址：</el-col>
            <el-col>营业时间：</el-col>
        </el-col>

        <el-col :span="4">
            <el-col>添加时间：</el-col>
        </el-col>

    </el-row>
    <el-row>
        <el-col :span="6">门店名称：<el-input style="width: 200px;" v-model="search.name" placeholder="请输入门店名称"
                clearable /></el-col>
        <el-col :span="10">提交时间:
            <el-date-picker v-model="search.time" type="daterange" range-separator="至" start-placeholder="起始日期"
                end-placeholder="终止日期" />
        </el-col>
        <el-col :span="1"><el-button type="primary"
                @click="sousuo(search.name, search.time)">搜索</el-button></el-col>
        <el-col :span="1" :offset="1"><el-button type="primary" @click="xinzeng">新增商品</el-button></el-col>
    </el-row>
    <el-col :span="24" class="col">
        <el-table :data="areaList" border>
            <el-table-column prop="goodsImage" label="商品图片" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsId" label="id" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsName" label="商品名字" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsPresentPrice" label="商品现价" align="center" label-class-name="header"></el-table-column>
            <el-table-column prop="goodsSalesVolume" label="商品销量" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column prop="goodsCartCount" label="商品购物车数量" align="center"
                label-class-name="header"></el-table-column>
            <el-table-column label="操作" align="center" label-class-name="header">
                <template #default="item">
                    <el-button type="text" @click="edite(item.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-col>

</template>

<script setup>
import { reactive ,ref,onMounted} from 'vue';
import axios from 'axios';

let res = null;
let areaList = ref([])
const xinzeng = function () {

}

const search = reactive({
    nmae: null,
    time: null
});

const edite =function(){
    
}

const timeFun = (time) => {
    var d = time ? new Date(time) : new Date();
    var year = d.getFullYear();
    var month = d.getMonth() + 1;
    var day = d.getDate();
    var hours = d.getHours();
    var min = d.getMinutes();
    var seconds = d.getSeconds();

    if (month < 10) month = "0" + month;
    if (day < 10) day = "0" + day;
    if (hours < 0) hours = "0" + hours;
    if (min < 10) min = "0" + min;
    if (seconds < 10) seconds = "0" + seconds;

    return year + "-" + month + "-" + day + " " + hours + ":" + min + ":" + seconds;
}

const sousuo = async function (name,time ) {
    let starTime = ""
    let endTime = ""
    if (time != null) {
        starTime = timeFun(time[0]);
        endTime = timeFun(time[1]);
    }
    res = await axios.get(`http://43.143.190.87:8091/panghudaojiaBackend/shop/getPanghuShopGoodsList?pageNum=1&pageSize=10&keyword=${name}&goodsStatus=&shopId=6326&startTime=${starTime}&endTime=${endTime}`)
    // areaList.value = res.data.data.list.map(item => {
    //     // item.address = item.communityProvince + item.communityCity + item.communityDistrict;
        
    //     return item;
    // });
    console.log(res);
}

onMounted(async function () {
    res = await axios.get("http://43.143.190.87:8091/panghudaojiaBackend/shop/getPanghuShopGoodsList?pageNum=1&pageSize=10&keyword=&goodsStatus=&shopId=6326&startTime=&endTime=");
    console.log(res);
    areaList.value = res.data.data.list.map(item => {
        // item.shopAddress = item.shopLongitude + item.shopLatitude;
        return item;
    });
})
</script>








<style lang="less" scoped>
.el-row {
    margin: 10px;
}


/deep/.header {
    background-color: #1890ff !important;
    color: white;
}
</style>